<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/form.css" />
  </head>
  <body>
    <div class="box">
      <h1>表单</h1>
      <hr />
      <div class="form-box">
        <div class="form">
          <span>姓名</span>
          <input
            name="name"
            type="text"
            placeholder="只能包含数字字母下划线，且数字不能开头，长度在8~16之间"
          />
          <span name="name_span"></span>
        </div>
        <div class="form">
          <span>联系电话</span>
          <input name="num" type="text" placeholder="amount" />
          <span name="num_span"></span>
        </div>
        <div class="form">
          <span>学历</span>
          <input name="edu" type="text" placeholder="amount" />
        </div>
        <div class="form">
          <span>年龄</span>
          <input name="age" type="text" placeholder="amount" />
        </div>
        <div class="form">
          <span>期望薪资</span>
          <input name="expect" type="text" placeholder="amount" />
        </div>
        <button class="save">保存</button>
        <button class="reset">重置</button>
      </div>
      <div class="table-box">
        <table>
          <thead>
            <th>
              <tr>
                <td>姓名</td>
                <td>联系电话</td>
                <td>学历</td>
                <td>年龄</td>
                <td>期望薪资</td>
                <td>操作</td>
              </tr>
            </th>
          </thead>
          <tbody name="tbody"></tbody>
        </table>
      </div>

      <!-- 隐藏卡片 -->
      <div class="hidden-box">
        <h1>请修改信息</h1>
        <hr />
        <div class="form-box">
          <div class="form">
            <span>姓名</span>
            <input
              name="name2"
              type="text"
              placeholder="只能包含数字字母下划线，且数字不能开头，长度在8~16之间"
            />
            <span name="name_span2"></span>
          </div>
          <div class="form">
            <span>联系电话</span>
            <input name="num2" type="text" placeholder="amount" />
            <span name="num_span2"></span>
          </div>
          <div class="form">
            <span>学历</span>
            <input name="edu2" type="text" placeholder="amount" />
          </div>
          <div class="form">
            <span>年龄</span>
            <input name="age2" type="text" placeholder="amount" />
          </div>
          <div class="form">
            <span>期望薪资</span>
            <input name="expect2" type="text" placeholder="amount" />
          </div>
          <button class="close">关闭</button>
          <button class="save2">修改保存</button>
        </div>
      </div>
      <div class="cover"></div>
    </div>

    <script src="./js/jquery.min.js"></script>

    <script src="./js/form.js"></script>
  </body>
</html>
